<template>
  <div class="table-action">
    <div
      class="table-action-item"
      @click="$emit('search-click')"
      v-show="searchShow"
    >
      <i class="el-icon-search" />
    </div>
    <div
      class="table-action-item table-action-item-border"
      @click="$emit('init-click')"
    >
      <i class="el-icon-refresh-left" />
    </div>
    <div class="table-action-item table-action-item-padding">
      <el-popover
        placement="bottom-end"
        width="200"
        trigger="click"
        popper-class="table-action-popover"
      >
        <div>
          <el-checkbox-group
            v-model="checked"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="item in tableHeader"
              :key="item.prop"
              :label="item.prop"
              >{{ item.title }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <el-button slot="reference"
          ><svg-icon icon-class="tableHeadList" class-name="card-panel-icon" />
          <i class="el-icon-caret-bottom"
        /></el-button>
      </el-popover>
    </div>
    <div
      v-show="eyeShow"
      class="table-action-item table-action-item-border-left"
      @click="$emit('eye-click')"
    >
      <svg-icon icon-class="eye-open" class-name="card-panel-icon" />
    </div>
  </div>
</template>
<script>
export default {
  name: "TableAction",
  components: {},
  props: {
    tableHeader: {
      type: Array,
      required: true,
    },
    eyeShow: {
      type: Boolean,
      default: false,
    },
    searchShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      checked: [],
    };
  },
  watch: {
    tableHeader: {
      immediate: true,
      handler(newVal) {
        // 根据 visible 属性设置选中状态
        this.checked = newVal
          .filter((item) => item.visible)
          .map((item) => item.prop);
      },
    },
  },
  mounted() {},
  methods: {
    handleCheckedCitiesChange(value) {
      this.$emit("check-change", value);
    },
  },
};
</script>
<style scoped lang="scss">
.table-action {
  display: flex;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  .table-action-item {
    position: relative;
    width: 36px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-icon-search,
    .el-icon-refresh-left,
    .card-panel-icon {
      font-weight: bolder;
      font-size: 16px;
      color: #dcdf#606266;
    }
    ::v-deep .el-button {
      padding: 0;
      border: none;
    }
    ::v-deep .el-button:hover,
    ::v-deep .el-button:focus {
      color: #606266;
      background: #e7e7e7;
    }
  }
  .table-action-item-border {
    border-left: 1px solid #dcdfe6;
    border-right: 1px solid #dcdfe6;
  }
  .table-action-item-border-left {
    border-left: 1px solid #dcdfe6;
  }
  .table-action-item-padding {
    padding: 0;
  }
  .table-action-item:hover {
    background: #e7e7e7;
  }
}
</style>
<style lang="scss">
.table-action-popover {
  .el-checkbox-group {
    max-height: 300px;
    overflow: auto;
  }
  .el-checkbox {
    display: block;
    margin: 5px 0;
  }
}
</style>
